<template>
	<view class="app"> 
		<u-sticky>
			<view class="order-tabs">
				<u-tabs :is-scroll="false" active-color="#19be6b" :list="orderStatus" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>
			</view>
		</u-sticky> 
		<view class="order-list" v-if="list.length>0">
			<view class="maincard" v-for="(item,index) in list" :key="index" @click="gotoOrderInfo(item)">
				<view class="card-top">
					<view class="card-left">
						订单号：<text style="color: black;">{{item.order_no}}</text>
					</view>
					<view class="card-right label1" v-if="item.status==0">
						待接单
					</view>
					<view class="card-right label2" v-if="item.status==1">
						待上门
					</view>
					<view class="card-right label3" v-if="item.status==2">
						已完成
					</view>
					<view class="card-right label4" v-if="item.status==-1">
						已取消
					</view>
				</view>
				<view class="card-main">
					<view class="card-main-item">
						<label>回收类别：</label>
						<text>{{item.book_category?item.book_category:'其他'}}</text>
					</view> 
					<view class="card-main-item">
						<label>取件地址：</label>
						<text>{{item.address.address}}</text>
					</view>
					<view class="card-main-item">
						<label>下单时间：</label>
						<text>{{item.createtime}}</text>
					</view>
					<view class="card-main-item">
						<label>预约时间：</label>
						<text>{{item.book_time?item.book_time:'尽快'}}</text>
					</view>
				</view>
				<view class="card-bottom" v-if="item.status == 0">
					<view class="btn" @click.stop="cancelOrder(item.id)">
						取消订单
					</view>
				</view>
			</view>
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
		</view>
		<view style="padding-top: 200rpx;" v-else>
			<u-empty text="暂无订单" mode="order"></u-empty>
		</view>
	</view>
</template>
<style scoped>  
	.order-list{}
	.order-btn-row{ display: flex; width: 100%;}
	.order-btn-right{ width: 100%; display: flex; align-items: center; justify-content: flex-end;}

	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.btn{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		border: 1px #9A9A9A solid;
		color: #9A9A9A;
		font-size: 28rpx;
		border-radius: 38rpx;
	}
	.label1{color: #F09A59; background-color: #FEF6E8;}
	.label2{color: #3E94EA; background-color: #ECF5FD;}
	.label3{color: #23A162; background-color: #EBF9F1;}
	.label4{color: #A4AEB8; background-color: #F3F3F3;}
	.maincard{
		width: 690rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-left: 30rpx;
		position: relative;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.card-top{
		width: 630rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	.card-left{
		width: 544rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 24rpx;
	}
	.card-right{
		font-size: 24rpx;
		width: 120rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border-radius: 10rpx;
	}
	.card-main{
		width: 630rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
	}
	.card-main-item{
		display: flex;
		align-items: center;
		height: 60rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.card-main-item label{ color: #A4AEB8;}
	.card-bottom{
		height: 76rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: 20rpx;
	}
	.btn{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		border: 1px #CECECE solid;
		color: black;
		font-size: 28rpx;
		border-radius: 38rpx;
	}
	.card-btn3{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.card-btn2{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.cancel-tp{
		width: 196rpx;
		height: 90rpx;
		position: absolute;
		left: 28rpx;
		bottom: 85rpx;
	}
</style>
<script>  
	export default {
		data() {
			return {
				tabIndex:0,
				loadMoreStatus:"loadmore",
				orderStatus:[{
					name: '待接单',
					value:'0'
				}, {
					name: '待上门',
					value:'1'
				}, {
					name: '已完成',
					value:'2'
				}, {
					name: '全部',
					value:'3'
				}],
				orderStatusName:{
					'-1':'已取消','0':'待接单','1':'待上门','2':'已完成',
				},
				orderParams:{
					pagesize:10,
					page:1
				},
				list:[]
			}
		}, 
		computed:{
			 
		},
		methods:{
			orderTabsChange(e){ 
				this.tabIndex = e
				this.list = []
				this.orderParams.page = 1
				this.loadList()
			},
			onReachBottom() { 
				this.loadList()
			},
			loadList(){
				this.loadMoreStatus = 'loading'; 
				if(this.tabIndex == 3){
					delete this.orderParams['status']
				}else{
					this.orderParams.status = this.tabIndex
				}
		
				this.$u.api.order.getOrderList(this.orderParams).then(res => {
					this.loadMoreStatus = 'loadmore';
					if(res.code != 1){
						return false
					}
					if(res.data.data == undefined || res.data.data.length <= 0){
						this.loadMoreStatus = 'nomore'; 
						return false
					} 
					this.list = [...this.list,...res.data.data]
					this.orderParams.page += 1
				}).catch(err => {
					this.loadMoreStatus = 'loadmore'; 
				})
			},
			cancelOrder(orderId){
				this.$u.api.order.cancelOrder({id:orderId}).then(res => {
					if(res.code == 1){
						uni.showToast({
						    title: '取消成功！',
						    icon: 'success'
						})
						setTimeout(()=>{
							this.orderTabsChange(this.tabIndex)
						},1000)
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'error'
						})
					}
					
				}).catch(err => {
					uni.showToast({
					    title: err.msg,
					    icon: 'error'
					})
				})
			},
			gotoOrderInfo(item){
				uni.navigateTo({
					url:"/pageA/order/info?orderId=" + item.id
				})
			},
			gotoOrderForm(orderId){  
				uni.navigateTo({
					url:"/pageA/order/form?orderId=" + orderId
				})
			}
		},
		onShow() {
			this.list = []
			this.orderParams.page = 1
			this.loadList()
		},
		onLoad(option){
			if(option?.tabIndex){
				this.tabIndex = option?.tabIndex
			} 
		}, 
		onReady() { 
			let _this = this
			uni.$on('orderListUpdate', function(data) { 
				_this.orderTabsChange(_this.tabIndex)
			})
		},
		onUnload() { 
			uni.$off('orderListUpdate') 
		}
		
	}
</script>